<template>
    <el-col 
        v-if="field.type === 'grid-col'" 
        class="grid-cell" 
        v-bind="state.layoutProps"
        :class="[selected ? 'selected' : '']"
        :key="field.id" 
        @click.stop="selectWidget(field)"
    >
            <draggable
                class="form-widget-list"
                tag="div"
                :list="field.widgetList" 
                item-key="id" 
                :group="{ name: 'dragGroup'}"
                animation="200"
                ghostClass="ghost"
                @add="(evt) => onGridDragAdd(evt, field.widgetList)"
                @update="onGridDragUpdate" 
                :move="checkContainerMove"
            >
                        <template #item="{element}">
                                <component
                                    :is="getWidgetName(element)"
                                    :designer="designer"
                                    :field="element"
                                    :form-model="formModel"
                                />
                        </template>
            </draggable>
    </el-col>
</template>

<script setup>
import { computed, reactive } from 'vue';
import draggable from 'vuedraggable';
defineOptions({
    name:"xy-grid-col"
})

const props = defineProps({
    designer:{
        type:Object,
        default:()=>({})
    },
    field:{
        type:Object,
        default:()=>({})
    },
    formModel:{
        type:Object,
        default:()=>({})
    }
})

const state = reactive({
    layoutProps: {
        span: props.field.options.span || 12,
        // md: props.field.options.md || 12,
        // sm: props.field.options.sm || 12,
        // xs: props.field.options.xs || 12,
        offset: props.field.options.offset || 0,
        push: props.field.options.push || 0,
        pull: props.field.options.pull || 0,
    }
})

const selected = computed(()=>{
    if(!props.designer) return false
    if(props.designer.selectId === props.field.id){
        return true
    }
    return false
})
const selectWidget = (field)=>{
    if(!!props.designer){
        props.designer.setSelected(field)
    }  
}
const onGridDragEnd =(evt, subList) =>{
        //
}

const onGridDragAdd = (evt, subList) => {
    console.log("onGridDragAdd",evt, subList);
    
    const newIndex = evt.newIndex
    if (!!subList[newIndex]) {
        props.designer.setSelected( subList[newIndex] )
    }

    props.designer.emitHistoryChange()
}

const onGridDragUpdate = () => {
    console.log("onGridDragUpdate");
    props.designer.emitHistoryChange()
}

const checkContainerMove = (evt)=>{
    console.log("checkContainerMove",evt);
    return props.designer.checkWidgetMove(evt)
}

// 元素从其他列表拖拽进来会触发
const dragAdd = ()=>{
    props.designer.emitHistoryChange()
}
// 元素在当前列表中拖拽会触发
const dragUpdate = ()=>{
    props.designer.emitHistoryChange()
}
const getWidgetName = (element)=>{
    return 'xy-' + element.type
}
</script>

<style lang='scss' scoped>
  .grid-cell {
    min-height: 38px !important;
    //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
    padding: 3px;
    outline: 1px dashed #336699;
    position: relative;

    .form-widget-list {
      min-height: 28px;
    }
  }

</style>